<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>消息</el-breadcrumb-item>
            <el-breadcrumb-item>未读消息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-table :data="messageList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="消息来自" prop="fromId"></el-table-column>
                <el-table-column label="消息内容" prop="content"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 同意按钮 -->
                        <el-tooltip class="item" effect="dark" content="同意申请" placement="top" :enterable="false">
                            <el-button type="success" icon="el-icon-check" circle @click="read(scope.row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.currentPage"
            :page-sizes="[2, 4, 8, 10]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
    </div>
  </template>
  <script>
  export default {
    data () {
        return {
            messageList: [],
            queryInfo: {
                pageSize: 4,
                currentPage: 1,
                status: 0
            },
            total: 0
        }
    },
    created () {
        this.getList()
    },
    methods: {
        async getList () {
            const { data: res } = await this.$http.get('/message/history', { params: this.queryInfo })
            if (res.code !== 100) {
                return this.$message.error('获取消息列表失败！')
            }
            this.messageList = res.extend.result.list
            this.total = res.extend.result.total
        },
        async read (id) {
            const confirmResult = await this.$confirm('此操作将确认读取, 是否继续?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消读取操作')
            }
            const { data: res } = await this.$http.put('/message/read', { messageId: id })
            console.log(res)
            if (res.code !== 100) {
                return this.$message.error('消息读取失败！')
            } else {
                this.$message.success('消息读取成功！')
                this.getList()
            }
        },
        handleSizeChange (newSize) {
            this.queryInfo.pageSize = newSize
            this.getList()
        },
        handleCurrentChange (newPage) {
            this.queryInfo.currentPage = newPage
            this.getList()
        }
    }
  }
</script>
